<script setup>
    import { onMounted,ref,reactive } from 'vue';
    import {getThemeListApi} from '../../http/api'
    
    const getThemeList = async() =>{
        const res = await getThemeListApi()
        console.log(res);
        threeLists.themeList = res.data.data
    }
    let threeLists = reactive(
        {
            themeList:[]
        }
    )
    onMounted(()=>{
        getThemeList()
    })
    </script>
    <template>
        <div>
            <header class="topHeader">
                <div>
                    <img class="img1" src="" alt="">
                </div>
                <div>
                    <img class="img2" src="" alt="">
                    <img class="img2" src="" alt="">
                </div>
            </header>
            <van-tabs v-model:active="active">
                <van-tab title="广场">
                    <ul class="theme-list">
                        <li class="theme-list-li">
                            <div class="theme-list-img-box"><img class="theme-list-img" src="https://wap.lexuemiao.com/img/indexMore.eada8bd5.png" alt=""></div>
                            <div class="theme-list-yuan">
                                <div class="yuan"></div>
                                <div class="yuan"></div>
                                <div class="yuan"></div>
                            </div>
                            <div class="theme-list-num">查看更多考研话题</div>
                        </li>
                        <li class="theme-list-li" v-for="item in threeLists.themeList" :key="item.theme_id">
                            <div class="theme-list-img-box"><img class="theme-list-img" :src="item.background" alt=""></div>
                            <div class="theme-list-title">#{{item.title}}#</div>
                            <div class="theme-list-num">{{item.dyna_count}}讨论</div>
                        </li>
                    </ul>
                </van-tab>
                <van-tab title="图书勘误">图书勘误</van-tab>
                <van-tab title="关注">关注</van-tab>
            </van-tabs>
        </div>
    </template>
    <style scoped>
    .topHeader{
        width: 100%;
        height: 120px;
        background: url(../../../public/header_bar.72fa2a02.png);
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .img1{
        width: 160px;
        height: 60px;
        margin-left: 40px;
    }
    .img2{
        width: 36px;
        height: 44px;
        margin-left: 20px;
        margin-right: 40px;
    }
    .theme-list{
        margin-top: 40px;
        text-align: center;
        width: 100%;
        height: 300px;
        overflow-x: scroll;
        display: flex;
    }
    .theme-list-img{
        width: 200px;
        height: 200px;
        border-radius: 10px;
    }
    .theme-list-img-box{
        width: 200px;
        height: 200px;
    }
    .theme-list-title{
        color: #f26431;
        margin-top: 20px;
        font-size: 30px;
    }
    .theme-list-num{
        color: #a1a4b1;
        font-size: 14px;
    }
    .theme-list-li{
        margin-left: 20px;
    }
    .yuan{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #ccc;
    }
    .theme-list-yuan{
        height: 34px;
        display: flex;
        align-content: center;
        justify-content: center;
        margin-top: 20px;
    }
    </style>